<template>
  <el-container>
    <el-header style="height: auto; padding: 0; background: transparent">
      <el-card shadow="never">
        <el-descriptions :column="1" title="问题描述">
          <el-descriptions-item label="问题1">
            <i class="el-icon-circle-close"></i>
            每次加载时候, el-select下拉组件options值获取在获取userId之后,
            出现下拉闪烁数字id问题。
          </el-descriptions-item>
          <el-descriptions-item label="问题2">
            <i class="el-icon-circle-close"></i>
            在显示数字id时候，点击下拉框，加载到下拉popper列表后，不会回显文字。
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-header>

    <el-main style="display: flex; padding: 0; margin-top: 20px">
      <el-card shadow="never" style="flex: 1">
        <el-form ref="formRef" :model="form" :rules="rules">
          <el-form-item label="审批人" label-width="80px" prop="userId">
            <el-select clearable v-model="form.userId" @change="changeUser">
              <el-option
                v-for="(item, index) in userList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>

        <code>
           form: {{ form }}
           <br/>
           userList: {{ userList }}
        </code>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Question",
  data() {
    return {
      userList: [],
      form: {
        userId: "",
        userName: "",
      },
      rules: {
        userId: [{required: true, message: '审批人不能为空', trigger: 'change'}],
      },
    };
  },
  mounted() {
    this.getDetail(); // 500ms后返回
    this.getUserList(); // 1s后返回
  },
  methods: {
    submit() {
      this.$refs.formRef.validate((valid) => {
        valid ?
         this.$message.success('校验成功, 开始提交') :
         this.$message.error('校验失败, 不能提交')
      })
    },
    async getDetail() {
      const res = await this.getDetailApi();
      this.form.userName = res?.userName || "";
      this.form.userId = res?.userId || "";
    },
    async getUserList() {
      const res = await this.getUserApi();
      this.userList = res || [];
    },
    getDetailApi() {
      const data = {
        userId: 195,
        userName: "王强",
      };
      return new Promise((resolve, reject) =>
        setTimeout(() => resolve(data), 500)
      );
    },
    getUserApi() {
      const data = [
          { id: 194, name: "张鑫越",  },
          { id: 195, name: "王强",  },
          { id: 196, name: "李刚",  },
      ];
      return new Promise((resolve, reject) =>
        setTimeout(() => resolve(data), 2000)
      );
    },
    changeUser(userId) {
      console.log(userId, typeof userId)
      const findItem = this.userList.find(item => item.id === userId)
      this.form.userName = findItem?.name || ''
    },
  },
};
</script>

<style>
.el-icon-circle-close {
  color: #f56c6c;
  margin-right: 6px;
}
</style>
